<script setup lang="ts">
import { PropType, toRef, ref, onMounted, onUpdated } from "vue";
import { Experiment } from "@/api/LabExperimentApi";
import { getPlatform } from "@/api/LabPlatformApi";

const props = defineProps({
  expData: {
    type: Object as PropType<Experiment>,
    required: true
  },
  configFlag: {
    type: Boolean,
    default: false
  },
  configId: {
    type: String,
    default: ""
  }
});
const sensors = ref([]);
const data = ref({});
onUpdated(async () => {
  sensors.value = props.expData.sensors.map(item => {
    return item.name;
  });
  if (props.configFlag == true) {
    const res = await getPlatform(props.configId);
    data.value = res.data;
  } else {
    data.value = props.expData;
  }
});
</script>

<template>
  <el-descriptions border>
    <el-descriptions-item label="实例ID">{{ expData.id }}</el-descriptions-item>
    <el-descriptions-item label="名称">{{ expData.name }}</el-descriptions-item>
    <el-descriptions-item label="状态">
      <el-tag
        style="margin-left: 20px"
        effect="light"
        size="small"
        :type="
          expData.state === 20
            ? 'danger'
            : expData.state === 10
            ? ''
            : 'warning'
        "
      >
        {{
          expData.state === 20
            ? "已结束"
            : expData.state === 10
            ? "正在运行"
            : expData.state === 0
            ? "未开始"
            : String(expData.state)
        }}
      </el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="平台ID">
      {{ expData.expPlatformId }}
    </el-descriptions-item>
    <el-descriptions-item label="描述" :span="2">
      {{ expData.desc }}
    </el-descriptions-item>

    <el-descriptions-item label="开始时间">
      {{ expData.startTime }}
    </el-descriptions-item>
    <el-descriptions-item label="结束时间">
      {{ expData.endTime }}
    </el-descriptions-item>
    <el-descriptions-item label="设定时长">
      {{ expData.days ? expData.days + "天" : ""
      }}{{ expData.hours ? expData.hours + "小时" : ""
      }}{{ expData.minutes ? expData.minutes + "分钟" : ""
      }}{{ expData.seconds ? expData.seconds + "秒" : "" }}
    </el-descriptions-item>
    <el-descriptions-item label="设备列表" :span="2">
      <el-select
        v-model="sensors"
        :max-collapse-tags="5"
        style="width: 500px"
        collapse-tags
        collapse-tags-tooltip
        multiple
        placeholder="无设备"
        disabled
      />
    </el-descriptions-item>
    <el-descriptions-item label="支持修改">
      {{ expData.canChangeParam ? "是" : "否" }}
    </el-descriptions-item>

    <el-descriptions-item label="创建时间">
      {{ expData.createTime }}
    </el-descriptions-item>
    <el-descriptions-item label="更新时间">
      {{ expData.updateTime }}
    </el-descriptions-item>
    <el-descriptions-item label="创建人">
      {{ expData.createUser }}
    </el-descriptions-item>
  </el-descriptions>
</template>
